<!DOCTYPE html>
<html lang="en">
<head>
    <include file="Public/h/head.html" title="菜单管理" main="" key=""/>
</head>

<body class="overflow-hidden">
<div class="wrapper preload">
    <!--顶栏-->
    <include file="Public/h/nav.html"/>

    <!-- 菜单 -->
    <include file="Public/h/menu.html"/>

    <!--主要内容-->
    <div class="main-container">
        <div class="padding-md">
            <!--标题-->
            <div class="jw-box">
                <div class="page-title text-primary">
                    <b>菜单管理</b>
                </div>
            </div>
            <div class="jw-box">
                <form>
                    <input type="text" name="name" placeholder="名称">
                    <input type="text" name="url" placeholder="节点">
                    <button>搜索</button>
                    <a class="btn btn-sm btn-primary pull-right" onclick="$('#add-mb').modal()">新增菜单</a>
                </form>
            </div>
            <div class="jw-box">
                <table class="table table-bordered table-hover">
                    <tr>
                        <th>#</th>
                        <th>菜单名称</th>
                        <th>节点位置</th>
                        <th>icon</th>
                        <th>类型</th>
                        <th>父级菜单(ID)</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                    <foreach name="menu" item="vo">
                        <tr>
                            <td><{$vo.id}></td>
                            <td><{$vo.name}></td>
                            <td><{$vo.url}></td>
                            <td><i class="fa fa-<{$vo.icon}>"></i> <{$vo.icon}></td>
                            <td><{$vo.type}>菜单</td>
                            <td><{$vo.parent_id}></td>
                            <td><{$vo.sort}></td>
                            <td>
                                <a class="text-danger" onclick="delTip('<{$vo.id}>')">删除</a>
                                <a class="text-primary change-btn" data-id="<{$vo.id}>" data-name="<{$vo.name}>" data-icon="<{$vo.icon}>" data-url="<{$vo.url}>" data-sort="<{$vo.sort}>" data-type="<{$vo.type}>" data-parent_id="<{$vo.parent_id}>">修改</a>
                            </td>
                        </tr>
                    </foreach>
                </table>
            </div>
            <!--导入分页-->
            <include file="Public/h/page.html"/>
        </div><!-- ./padding-md -->
    </div><!-- /main-container -->

    <!--新增菜单-->
    <div class="modal fade" id="add-mb">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">新增菜单</h4>
                </div>
                <form action="__CONTROLLER__/add" method="post">
                <div class="modal-body">
                    <div class="form-group m-bottom-md">
                        <label>菜单级数</label>
                        <select name="type" class="form-control type_sel">
                            <option value="1">一级菜单</option>
                            <option value="2">二级菜单</option>
                        </select>
                    </div>
                    <div class="form-group m-bottom-md parent_sel" style="display: none">
                        <label>父级菜单</label>
                        <select name="parent_id" class="form-control">
                            <foreach name="menux" item="vo">
                                <option value="<{$vo.id}>"><{$vo.name}></option>
                            </foreach>
                        </select>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>菜单名称</label>
                        <input type="text" name="name" class="form-control" placeholder="菜单名称" required>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>菜单图标</label>
                        <input type="text" name="icon" class="form-control" placeholder="菜单图标" value="star" required>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>跳转节点</label>
                        <input type="text" name="url" class="form-control" placeholder="节点" required>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>菜单排序</label>
                        <input type="text" name="sort" class="form-control" placeholder="排序" value="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary">添加菜单</button>
                </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--修改菜单-->
    <div class="modal fade" id="upd-mb">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改菜单</h4>
                </div>
                <form action="__CONTROLLER__/upd" method="post">
                <div class="modal-body">
                    <div class="form-group m-bottom-md">
                        <label>菜单级数</label>
                        <select id="type" name="type" class="form-control type_sel">
                            <option value="1">一级菜单</option>
                            <option value="2">二级菜单</option>
                        </select>
                    </div>
                    <div class="form-group m-bottom-md parent_sel" style="display: none">
                        <label>父级菜单</label>
                        <select id="parent_id" name="parent_id" class="form-control">
                            <foreach name="menux" item="vo">
                                <option value="<{$vo.id}>"><{$vo.name}></option>
                            </foreach>
                        </select>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>菜单名称</label>
                        <input type="hidden" id="id" name="id">
                        <input type="text" id="name" name="name" class="form-control" placeholder="菜单名称" required>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>菜单图标</label>
                        <input type="text" id="icon" name="icon" class="form-control" placeholder="菜单图标" value="star" required>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>跳转节点</label>
                        <input type="text" id="url" name="url" class="form-control" placeholder="节点" required>
                    </div>
                    <div class="form-group m-bottom-md">
                        <label>菜单排序</label>
                        <input type="text" id="sort" name="sort" class="form-control" placeholder="排序" value="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary">修改菜单</button>
                </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <include file="Public/h/foot.html"/>
    <include file="Public/h/del_modal.html"/>
</div><!-- /wrapper -->
<a href="#" class="scroll-to-top hidden-print"><i class="fa fa-chevron-up fa-lg"></i></a>
<include file="Public/h/js.html"/>
<script>
    $('.type_sel').change(function () {
        var index = $(this).index('.type_sel');
        if($(this).val()==1){
            $('.parent_sel:eq('+index+')').hide();
        }else{
            $('.parent_sel:eq('+index+')').show();
        }
    });

    $('.change-btn').click(function () {
        if($(this).data('type')==1){
            $('.parent_sel:eq(1)').hide();
        }else{
            $('.parent_sel:eq(1)').show();
        }
        $('#type').val($(this).data('type'));
        $('#id').val($(this).data('id'));
        $('#parent_id').val($(this).data('parent_id'));
        $('#name').val($(this).data('name'));
        $('#icon').val($(this).data('icon'));
        $('#url').val($(this).data('url'));
        $('#sort').val($(this).data('sort'));
        $('#upd-mb').modal();
    });
</script>
</body>
</html>
